<template>
  <div class="couponList-container app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.score_rule_remark" placeholder="优惠券名称" clearable class="filter-item input-item" style="width: 200px;" @clear="handleFilter" @keyup.enter.native="handleFilter" />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
        新增
      </el-button>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="名称" align="center">
        <template slot-scope="{row}">
          <span>{{ row.score_rule_remark }}({{ row.id_public_rule_4_score }})</span>
        </template>
      </el-table-column>
      <el-table-column label="开始时间" align="center">
        <template slot-scope="{row}">
          <span>{{ row.time_begin }}</span>
        </template>
      </el-table-column>
      <el-table-column label="结束时间" align="center">
        <template slot-scope="{row}">
          <span>{{ row.time_end }}</span>
        </template>
      </el-table-column>
      <el-table-column label="类型" align="center">
        <template slot-scope="{row}">
          <span>{{ row.id_public_goods_type_list?(row.id_public_goods_type_list.indexOf("-999") !== -1)?"全品类通用":"品类券":"单品券" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="已使用" align="center">
        <template slot-scope="{row}">
          <span>{{ row.send_count_already_use }}</span>
        </template>
      </el-table-column>
      <el-table-column label="已领取" align="center">
        <template slot-scope="{row}">
          <span>{{ row.send_count_already_get }}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否上线" align="center">
        <template slot-scope="{row}">
          <div>
            <el-switch
              v-model="row.is_online"
              inactive-color="#ff4949"
              :active-value="0"
              :inactive-value="1"
              @change="handleChangeStatus(row)"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="业务操作" align="center">
        <template slot-scope="{row}">
<!--          <el-button size="small" type="primary" @click="handleUpdate(row)">编辑</el-button>-->
          <el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="currentPage" :limit.sync="listQuery.limit" @pagination="getPageList" />


    <el-dialog :title="textMap[dialogStatus] + '优惠券'" :visible.sync="dialogFormVisible" width="80%">
      <div class="dialog-content">
        <EditDialog ref="editDialog" :dialogActive="dialogActive"></EditDialog>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelDialog">
          取消
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
          {{ dialogActive === 2 ? '确认提交' : '下一步' }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import EditDialog from '@/views/coupon/component/EditDialog';
import {couponList, couponListNew} from '@/api/coupon'


export default {
  name: 'CouponList2',
  components: { Pagination, EditDialog },
  directives: { waves },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      currentPage: 0,
      listQuery: {
        invoke_method: 'load_score_config',
        pre_db_para_begin_idx: 0,
        pre_db_para_length_4_list: 10,
        type_rule_4_score: 106,
        pre_db_para_order_by_para: ' id_public_rule_4_score desc '
      },
      dialogFormVisible: false,
      dialogStatus: 'create',
      textMap: {
        update: '编辑',
        create: '新增'
      },
      dialogActive: 0,
      temp: {
        data_weight: null,
        frequnce_days: null,
        score_rule_remark: null,
        time_begin: null,
        time_end: null,
        key_4_use_rule: null,
        value_4_use_rule: null,
        type_rule_4_score: 106,
        is_online: 0,
        type_4_score_display: 2,
        rate_4_rule_score: 1,
        id_public_agent_info_list: null,
        id_public_goods_info_list: null,
        id_public_goods_type_list: null
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    /*
    * 获取列表数据
    * */
    getList() {
      couponListNew(this.Qs.stringify(this.listQuery)).then(response => {
        this.list = response.public_score_list
        this.total = response.length_4_list

        setTimeout(() => {
          this.listLoading = false
        }, 0.5 * 1000)
      })
    },

    /*
    * 点击分页进行查询
    * */
    getPageList(val) {
      this.listQuery.pre_db_para_begin_idx = (val.page - 1) * this.listQuery.pre_db_para_length_4_list
      this.getList()
    },

    /*
    * 查询数据
    * */
    handleFilter() {
      this.listQuery.pre_db_para_begin_idx = 0
      this.getList()
    },
    clearFilter() {
      this.listQuery.pre_db_para_begin_idx = 0
      this.listQuery.filter_type = 1
      this.getList()
    },

    /*
    * 操作上下线
    * */
    handleChangeStatus(item) {
      if (item.is_online === 1) {
        this.$confirm('您确定要下线该优惠券吗?' ,'优惠券下线', {
          type: 'warning'
        }).then(() => {
            couponList(this.Qs.stringify({
              invoke_method:'public_page_4m_insert_or_upd_rule_info',
              pre_db_para_id_public_rule_4_score: item.id_public_rule_4_score,
              is_online: item.is_online,
              time_end: item.time_end
            })).then(response => {
              this.$notify({
                title: 'Success',
                message: '操作成功',
                type: 'success',
                duration: 2000
              })
              this.getList()
            })
        }).catch(() => {
          this.getList()
        })
      } else {
        couponList(this.Qs.stringify({
          invoke_method:'public_page_4m_insert_or_upd_rule_info',
          pre_db_para_id_public_rule_4_score: item.id_public_rule_4_score,
          is_online: item.is_online,
          time_end: item.time_end
        })).then(response => {
          this.$notify({
            title: 'Success',
            message: '操作成功',
            type: 'success',
            duration: 2000
          })
          this.getList()
        }).catch((res) => {
          this.getList()
          console.log(res)

        })
      }
    },

    cancelDialog() {
      this.dialogFormVisible = false
      this.getList()
    },
    resetTemp() {

    },
    /*
    * 新增优惠券
    * */
    handleCreate() {
      this.dialogFormVisible = true
    },
    createData() {
      if (this.dialogActive !== 2) {
        switch (this.dialogActive) {
          case 0:
            this.$refs.editDialog.$refs.baseInfo.$refs.baseInfoForm.validate(valid => {
              if (valid) {
                this.temp.data_weight = this.$refs.editDialog.$refs.baseInfo.formBaseInfo.data_weight
                this.temp.frequnce_days = this.$refs.editDialog.$refs.baseInfo.formBaseInfo.frequnce_days
                this.temp.score_rule_remark = this.$refs.editDialog.$refs.baseInfo.formBaseInfo.score_rule_remark
                this.temp.time_begin = this.$refs.editDialog.$refs.baseInfo.formBaseInfo.time_begin
                this.temp.time_end = this.$refs.editDialog.$refs.baseInfo.formBaseInfo.time_end
                this.temp.key_4_use_rule = this.$refs.editDialog.$refs.baseInfo.formBaseInfo.key_4_use_rule
                this.temp.value_4_use_rule = this.$refs.editDialog.$refs.baseInfo.formBaseInfo.value_4_use_rule
                this.dialogActive ++
              } else {
                return false
              }
            })
            break;
          case 1:
            let selectData = this.$refs.editDialog.$refs.agentInfo.multipleSelection
            let selectAgent = []
            selectData.forEach(item => {
              selectAgent.push(item.id_public_agent_info)
            })
            this.temp.id_public_agent_info_list = ',' + selectAgent.join(',') + ','
            this.dialogActive ++
            break;
        }
      } else {
        if (this.$refs.editDialog.$refs.goodsInfo.checkedTypes.length) {
          this.temp.id_public_goods_type_list = ',' + this.$refs.editDialog.$refs.goodsInfo.checkedTypes.join(',') + ','
        }
        if (this.$refs.editDialog.$refs.goodsInfo.checkedGoods.length) {
          this.temp.id_public_goods_info_list = ',' + this.$refs.editDialog.$refs.goodsInfo.checkedGoods.join(',') + ','
        }


        console.log(this.temp)
        couponList(this.Qs.stringify({
          invoke_method: 'public_page_4m_insert_or_upd_rule_info',
          data_weight: this.temp.data_weight,
          frequnce_days: this.temp.frequnce_days,
          score_rule_remark: this.temp.score_rule_remark,
          time_begin: this.temp.time_begin,
          time_end: this.temp.time_end,
          key_4_use_rule: this.temp.key_4_use_rule,
          value_4_use_rule: this.temp.value_4_use_rule,
          type_rule_4_score: 106,
          is_online: 0,
          type_4_score_display: 2,
          rate_4_rule_score: 1,
          id_public_data_admin_user: 800,
          key_4_rule: '-1',
          id_public_agent_info_list: this.temp.id_public_agent_info_list,
          id_public_goods_info_list: this.temp.id_public_goods_info_list,
          id_public_goods_type_list: this.temp.id_public_goods_type_list
        })).then(response => {
          this.$confirm('优惠券配置成功', '成功', {
            type: 'success'
          }).then(() => {
            this.dialogActive = 0
            this.dialogFormVisible = false
            this.getList()
          }).catch(() => {
            this.dialogActive = 0
            this.dialogFormVisible = false
            this.getList()
          })
        })

        /*let params = this.Qs.stringify()
        this.$axios.post('customer_public_score_mgr', params).then(res => {
          if (res.status === 0) {
            this.$message({
              message: '优惠券新增成功',
              type: "success",
              duration: 2000
            })
          }
        })*/
      }
    },
    handleDelete(row) {
      console.log(row)
      this.$confirm('您确定要删除该数据吗?', '提示', {
        type: "warning"
      }).then(() => {
        couponList(this.Qs.stringify({
          invoke_method: 'public_page_4m_insert_or_upd_rule_info',
          pre_db_para_id_public_rule_4_score: row.id_public_rule_4_score,
          is_online: 111,
          time_end: row.time_end
        })).then(response => {
          this.$confirm('删除成功', '成功', {
            type: 'success'
          }).then(() => {
            this.getList()
          }).catch(() => {
            this.getList()
          })
        })
      }).catch(() => {
        this.getList()
      })
    },
    updateData() {

    },


    getSortClass: function(key) {
      const sort = this.listQuery.sort
      return sort === `+${key}` ? 'ascending' : 'descending'
    }
  }
}
</script>

<style scoped lang="scss">
@import "../../styles/variables";

</style>
